const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
// const TerserPlugin = require("terser-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
// const ESLintPlugin = require('eslint-webpack-plugin');

const publicPath = process.env.NODE_ENV === "production" ? "./" : "";

module.exports = {
    entry: "./src/index.jsx",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/[name].[chunkhash].js",
        chunkFilename: "js/[id].[chunkhash].js",
        publicPath,
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"],
                    },
                },
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.s[ac]ss$/i,
                use: ["style-loader", "css-loader", "sass-loader"],
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                type: "asset",
                parser: {
                    //转为base64
                    dataUrlCondition: {
                        maxSize: 1000,
                    },
                },
                generator: {
                    filename: "img/[name].[hash:6][ext]",
                    publicPath: "./",
                },
            },
        ],
    },
    resolve: {
        extensions: [".jsx", ".js"],
        alias: {
            src: path.resolve(__dirname, "src/"),
            pages: path.resolve(__dirname, "src/pages"),
            "react/jsx-runtime": "react/jsx-runtime.js",
        },
    },
    plugins: [
        // new ESLintPlugin({
        //     emitError: true, // 将错误视为构建失败
        //     emitWarning: true, // 将警告输出到控制台
        //     failOnError: true, // 如果有错误，立即终止构建
        //     failOnWarning: true, // 如果有警告，立即终止构建
        //     overrideConfigFile: path.join(__dirname, '.eslintrc.js'), // 使用指定的 ESLint 配置文件
        //     fix: true, // 尝试自动修复代码中的 ESLint 错误和警告
        //     extensions: ['ts', 'tsx'],
        //     files: './src/myForm',
        // }),
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin(
            [
                {
                    from: path.resolve(__dirname, "public"),
                    to: path.resolve(__dirname, "dist"),
                    ignore: [".*"],
                },
            ],
            {},
        ),
        new HtmlWebpackPlugin({
            template: "public/index.html",
        }),
    ],
    mode: "development",
    devServer: {
        // static: {
        //     directory: path.join(__dirname, 'public'),
        // },
        compress: false,
        // port: 8000,
    },

    devtool: process.env.NODE_ENV === "production" ? false : "cheap-module-source-map",
    optimization: {
        // minimize: true,
        // minimizer: [
        //     new TerserPlugin({
        //         extractComments: false
        //     })
        // ],
        splitChunks: {
            chunks: "all",
            name: false,
            maxSize: 1000000,
            minSize: 20000,
            minChunks: 1,
            maxAsyncRequests: 20,
            maxInitialRequests: 20,
            automaticNameDelimiter: "~",
            enforceSizeThreshold: 50000,
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2,
                },
                vendor: {
                    test: /[\\/]node_modules[\\/](react|react-dom|mobx|mobx-react|mobx-state-tree|react-router|react-router-dom)[\\/]/,
                    name: "chunk-vendors",
                    chunks: "all",
                },
                ui: {
                    test: /[\\/]node_modules[\\/](antd-mobile)[\\/]/,
                    name: "chunk-ui",
                    chunks: "initial",
                },
                basic: {
                    test: /[\\/]node_modules[\\/](react-activation|react-transition-group|lodash|axios|dayjs|echarts)[\\/]/,
                    name: "chunk-basic",
                    chunks: "initial",
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true,
                },
            },
        },
    },
    performance: { hints: false },
};
